import { getCinemaFilmList } from "@/services/cinema";
import { useMemo } from "react";
import { useNavigate, useParams, useRequest } from "umi";
import FilmInfo from "./components/film-info";
import FilmList from "./components/film-list";
import FilmSchedules from "./components/film-schedules";

const CinemaInfoPage = () => {
  const navigate = useNavigate();
  // filmId
  const { cinemaId, filmId } = useParams();

  const { data } = useRequest(() => getCinemaFilmList());

  // 当前选中的电影
  const film = useMemo(() => {
    return data?.films.find((item) => item.filmId === +filmId!);
  }, [filmId, data]);

  // 轮播图切换操作
  const handleChange = (index: number) => {
    // 算出 index 下标在 data?.films 中 filmId
    const filmId = data?.films[index].filmId;
    // 跳转路由
    navigate(`/cinema/${cinemaId}/film/${filmId}`);
  };

  return (
    <div className="cinema-info-page">
      <h1>afasdfasdfasdf</h1>

      {film && (
        <>
          <FilmList
            list={data?.films || []}
            film={film}
            onChange={handleChange}
          />

          <FilmInfo info={film} />

          <FilmSchedules cinemaId={+cinemaId!} film={film} />
        </>
      )}
    </div>
  );
};

export default CinemaInfoPage;
